<template>
  <div class="buttom-1">
    <img src="../assets/img/login.png" class="img-1" />
    <div class="bot-1">
      <div class="yon-1">用户反馈</div>
      <div class="biaoeg-1">
        <!-- 表头 -->
        <div class="baotou-1">
          <div class="d-1">课程</div>
          <div class="d-1">留言</div>
          <div class="d-1">日期</div>
        </div>
        <!-- 内容 -->
        <div class="nei-11">
          <el-carousel
            arrow="never"
            :autoplay="true"
            :pause-on-hover="false"
            direction="vertical"
            :interval="2000"
            indicator-position="none"
            class="luo-1"
          >
            <el-carousel-item
              v-for="(group, groupIndex) in groupedData"
              :key="groupIndex"
              class="luo-2"
            >
              <div
                v-for="(item, index) in group"
                :key="`item-${index}`"
                class="neir-o"
              >
                <div class="t-1">{{ item.id }}</div>
                <div class="t-2">{{ item.name }}</div>
                <div class="t-3">{{ item.comment }}</div>
                <div class="t-4">{{ item.time }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="bot-2">
      <div class="bot-3" v-for="(item, index) in arr" :key="index">
        <div class="bot-4">{{ item.name }}</div>
        <div class="bot-5">{{ item.value }}</div>
      </div>
    </div>
    <img src="../assets/img/rw-1.png" class="img-1" />
  </div>
</template>

<script lang="ts" setup>
import { getZhbrs, getUserFeedback } from '@/services/index'
import type { User, arrz } from '@/types'
import { ref, onMounted, computed } from 'vue'
const arr = ref<arrz>([])
const arrs = ref<User[]>([])
const list = async () => {
  const res = await getZhbrs()
  arr.value = res.data
  console.log(res.data)
}
const list1 = async () => {
  const res = await getUserFeedback()
  arrs.value = res.data
  console.log(res.data)
}
onMounted(() => {
  list()
  list1()
})
const groupedData = computed(() => {
  const groups = []
  for (let i = 0; i < arrs.value.length; i += 2) {
    groups.push(arrs.value.slice(i, i + 2))
  }
  return groups
})
</script>

<style lang="scss" scoped>
.buttom-1 {
  width: 100%;
  height: 100%;
  // background: red;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .img-1 {
    width: 82px;
    height: 82px;
    margin-right: 30px;
  }
  .bot-1 {
    width: 600px;
    height: 92px;
    margin: 0 10px;
    // background: red;

    .yon-1 {
      color: rgba(252, 254, 255, 0.8);
      font-weight: normal;
      font-family: 'Microsoft Yahei', Arial, 'sans-serif';
      font-size: 24px;
    }
    .biaoeg-1 {
      width: 100%;
      height: 66px;
      box-sizing: border-box;
      border: 1px solid #fff;
      padding: 5px;
      display: flex;
      flex-direction: column;
      .baotou-1 {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: 20px;
        .d-1 {
          width: 80px;
          height: 20px;
          // background: #fff;
          // text-align: center;
          color: #fff;
          font-size: 14px;
        }
      }
      .nei-11 {
        width: 100%;
        height: 40px;
        // position: relative;
        // background: red;
        .neir-o {
          display: flex;
          width: 100%;
          will-change: transform;
          .t-1 {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #f4ff00;
            color: #000;
            text-align: center;
            margin: 0px 60px 0px 0;
            font-size: 12px;
          }
          .t-2 {
            width: 100px;
            height: 16px;
            color: #fff;

            margin: 0px 40px 0px 0;
            font-size: 12px;
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 溢出隐藏 */
            text-overflow: ellipsis; /* 文本溢出时显示省略号 */
          }
          .t-3 {
            width: 100px;
            height: 16px;
            color: #fff;

            margin: 0px 36px 0px 40px;
            font-size: 12px;
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 溢出隐藏 */
            text-overflow: ellipsis; /* 文本溢出时显示省略号 */
          }
          .t-4 {
            width: 100px;
            height: 16px;
            color: #fff;

            margin: 0px 34px 0 5px;
            font-size: 14px;
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 溢出隐藏 */
            text-overflow: ellipsis; /* 文本溢出时显示省略号 */
          }
        }
        .luo-1 {
          width: 100%;
          height: 33px;
          //  background: rgb(0, 255, 55);
        }
        .luo-2 {
          width: 100%;
          height: 33px;
          // background: rgb(0, 255, 55);
        }
      }
    }
  }
  .bot-2 {
    width: 820px;
    height: 72px;
    margin: 0 10px;
    display: flex;

    .bot-3 {
      width: 200px;
      height: 72px;
      // background: red;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .bot-4 {
        color: rgba(252, 254, 255, 0.8);
        font-weight: normal;
        font-family: 'Microsoft Yahei', Arial, 'sans-serif';
        font-size: 24px;
      }
      .bot-5 {
        font-size: 36px;
        color: #fcf85d;
      }
    }
  }
}
</style>
